import React from 'react';
import { NavLink } from 'react-router-dom';

import styles from './index.module.less';

export default class Category extends React.Component {
  state={
    categoryList: [
      {
        key: 1,
        title: 'PVC塑料',
        num: 5,
        category: [
          { key: 1, title: 'PVC塑料', num: 2 },
          { key: 2, title: 'PVC塑料', num: 3 },
          { key: 3, title: 'PVC塑料', num: 3 },
        ],
      },
      {
        key: 2,
        title: 'PE塑料',
        num: 6,
        category: [
          { key: 1, title: 'PVC塑料', num: 3 },
          { key: 2, title: 'PVC塑料', num: 3 },
        ],
      },
      {
        key: 3,
        title: 'PE塑料',
        num: 7,
        category: [
          { key: 1, title: 'PVC塑料', num: 4 },
          { key: 2, title: 'PVC塑料', num: 3 },
        ],
      },
    ],
  }

  render() {
    const { categoryList } = this.state;
    return (
      <div className={styles.categoryBox}>
        {/* 商品分类 */}
        <div className={styles.text1}>商品分类</div>
        <div className={styles.text2}>全部分类 (18)</div>
        <ul>
          {
            categoryList.map((item, index) => {
              return (
                <li key={item.key}>
                  <div className={styles.box1}>
                    <button className={styles.btn1}>-</button>
                    {/* <button className={styles.s1}>+</button> */}
                    <span className={styles.s3}>{item.title}({item.num})</span>
                    {
                      item.category !== null && item.category.map(iem => {
                        return (
                          <div className={styles.box2} key={iem.key}>
                            <div className={styles.line}>
                              <span className={styles.s1}></span>
                              <span className={styles.s2}></span>
                              <span className={styles.s3}>{iem.title}({iem.num})</span>
                            </div>
                          </div>
                        );
                      })
                    }
                  </div>

                </li>
              );
            })
          }
        </ul>
      </div>
    );
  }
}
